<template>
  <div class="container" @click="clickHandle()">
    <div class="header">Looo-Geopen</div>
    <div class="hr_header"></div>
    <div>
      <div>
        <div class="header_text">Looo-Gepen 人气单品 限时抢购</div>
        <div>
          <div class="peNumber">现已累计人气 <span class="number">{{peaplenumber}}</span> 人</div>
          <div class="numadd"><navigator url='http://mpvue.com/qa/#vue-router'><span class="corsur">＋ 点击加入购物车</span><img src="../../../static/assets/shoppingblue.png" alt="购物车"></navigator></div>
        </div>
      </div>
      <div class="bannerArr">
        <div class="banerfirst">
          <img src="../../../static/assets/autumn.jpg" alt="人气单品">
        </div>
      </div>
      <div>
        <div class="header_text">Looo-Gepen 秘境·梦之美 限时抢购</div>
        <div>
          <div class="peNumber">现已累计人气 <span class="number">{{peaplenumber}}</span> 人</div>
          <div class="numadd"><navigator url='http://mpvue.com/qa/#vue-router'><span class="corsur">＋ 点击加入购物车</span><img src="../../../static/assets/shoppingblue.png" alt="购物车"></navigator></div>
        </div>
      </div>
      <div class="bannerArr">
        <div class="banerfirst">
          <img src="../../../static/assets/beauty.jpg" alt="人气单品">
        </div>
      </div>
      <div>
        <div class="header_text">Looo-Gepen 生来优雅 限时抢购</div>
        <div>
          <div class="peNumber">现已累计人气 <span class="number">{{peaplenumber}}</span> 人</div>
          <div class="numadd"><navigator url='http://mpvue.com/qa/#vue-router'><span class="corsur">＋ 点击加入购物车</span><img src="../../../static/assets/shoppingblue.png" alt="购物车"></navigator></div>
        </div>
      </div>
      <div class="bannerArr">
        <div class="banerfirst">
          <img src="../../../static/assets/fromy.jpg" alt="人气单品">
        </div>
      </div>
      <div>
        <div class="header_text">Looo-Gepen 撩动裙技 限时抢购</div>
        <div>
          <div class="peNumber">现已累计人气 <span class="number">{{peaplenumber}}</span> 人</div>
          <div class="numadd"><navigator url='http://mpvue.com/qa/#vue-router'><span class="corsur">＋ 点击加入购物车</span><img src="../../../static/assets/shoppingblue.png" alt="购物车"></navigator></div>
        </div>
      </div>
      <div class="bannerArr">
        <div class="banerfirst">
          <img src="../../../static/assets/hress.jpg" alt="人气单品">
        </div>
      </div>
      <div>
        <div class="header_text">Looo-Gepen 人气单品限时抢购</div>
        <div>
          <div class="peNumber">现已累计人气 <span class="number">{{peaplenumber}}</span> 人</div>
          <div class="numadd"><navigator url='http://mpvue.com/qa/#vue-router'><span class="corsur">＋ 点击加入购物车</span><img src="../../../static/assets/shoppingblue.png" alt="购物车"></navigator></div>
        </div>
      </div>
      <div class="bannerArr">
        <div class="banerfirst">
          <img src="../../../static/assets/ind.jpg" alt="人气单品">
        </div>
      </div>
      <div>
        <div class="header_text">Looo-Gepen 人气单品限时抢购</div>
        <div>
          <div class="peNumber">现已累计人气 <span class="number">{{peaplenumber}}</span> 人</div>
          <div class="numadd"><navigator url='http://mpvue.com/qa/#vue-router'><span class="corsur">＋ 点击加入购物车</span><img src="../../../static/assets/shoppingblue.png" alt="购物车"></navigator></div>
        </div>
      </div>
      <div class="bannerArr">
        <div class="banerfirst">
          <img src="../../../static/assets/kimbo.jpg" alt="人气单品">
        </div>
      </div>
      <div>
        <div class="header_text">Looo-Gepen 人气单品限时抢购</div>
        <div>
          <div class="peNumber">现已累计人气 <span class="number">{{peaplenumber}}</span> 人</div>
          <div class="numadd"><navigator url='http://mpvue.com/qa/#vue-router'><span class="corsur">＋ 点击加入购物车</span><img src="../../../static/assets/shoppingblue.png" alt="购物车"></navigator></div>
        </div>
      </div>
      <div class="bannerArr">
        <div class="banerfirst">
          <img src="../../../static/assets/look.jpg" alt="人气单品">
        </div>
      </div>
      <div>
        <div class="header_text">Looo-Gepen 人气单品限时抢购</div>
        <div>
          <div class="peNumber">现已累计人气 <span class="number">{{peaplenumber}}</span> 人</div>
          <div class="numadd"><navigator url='http://mpvue.com/qa/#vue-router'><span class="corsur">＋ 点击加入购物车</span><img src="../../../static/assets/shoppingblue.png" alt="购物车"></navigator></div>
        </div>
      </div>
      <div class="bannerArr">
        <div class="banerfirst">
          <img src="../../../static/assets/offers.jpg" alt="人气单品">
        </div>
      </div>
      <div>
        <div class="header_text">Looo-Gepen 人气单品限时抢购</div>
        <div>
          <div class="peNumber">现已累计人气 <span class="number">{{peaplenumber}}</span> 人</div>
          <div class="numadd"><navigator url='http://mpvue.com/qa/#vue-router'><span class="corsur">＋ 点击加入购物车</span><img src="../../../static/assets/shoppingblue.png" alt="购物车"></navigator></div>
        </div>
      </div>
      <div class="bannerArr">
        <div class="banerfirst">
          <img src="../../../static/assets/orthin.jpg" alt="人气单品">
        </div>
      </div>
      <div>
        <div class="header_text">Looo-Gepen 人气单品限时抢购</div>
        <div>
          <div class="peNumber">现已累计人气 <span class="number">{{peaplenumber}}</span> 人</div>
          <div class="numadd"><navigator url='http://mpvue.com/qa/#vue-router'><span class="corsur">＋ 点击加入购物车</span><img src="../../../static/assets/shoppingblue.png" alt="购物车"></navigator></div>
        </div>
      </div>
      <div class="bannerArr">
        <div class="banerfirst">
          <img src="../../../static/assets/qiangqiu.jpg" alt="人气单品">
        </div>
      </div>
      <div style="text-align:left;">
        <div class="header_text">Looo-Gepen 人气单品限时抢购</div>
        <div>
          <div class="peNumber">现已累计人气 <span class="number">{{peaplenumber}}</span> 人</div>
          <div class="numadd"><navigator url='http://mpvue.com/qa/#vue-router'><span class="corsur">＋ 点击加入购物车</span><img src="../../../static/assets/shoppingblue.png" alt="购物车"></navigator></div>
        </div>
      </div>
      <div class="bannerArr">
        <div class="banerfirst">
          <img src="../../../static/assets/sumer.jpg" alt="人气单品">
        </div>
      </div>
    </div>
    <div class="hr_header"></div>
    <div class="footer">
      <div>
        <div>
          <img src="../../../static/assets/首页s.png" alt="短裙">
        </div>
        <div style="color:#FA7AD7;">潮流前线</div>
      </div>
      <div>
        <div>
          <img src="../../../static/assets/购物车t.png" alt="短裙">
        </div>
        <div>购物车</div>
      </div>
      <div>
        <div>
          <img src="../../../static/assets/更多.png" alt="短裙">
        </div>
        <div>更多商品</div>
      </div>
      <div>
        <div>
          <img src="../../../static/assets/我的.png" alt="短裙">
        </div>
        <div>我的信息</div>
      </div>
    </div>
  </div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
      msg: '点我点我点我',
      peaplenumber: '20123'
    }
  },

  components: {
    card
  },

  methods: {
    clickHandle () {
      this.msg = ''
    }
  },

  created () {
    // 调用应用实例的方法获取全局数据
  }
}
</script>

<style scoped>
  .header {
    width:100%;
    height:100px;
    background:#DFC0E7;
    color:#fff;
    -webkit-display:flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
    font-size:16px;
    font-weight:bold;
  }
  .hr_header {
    background:#F7F7F7;
    height:3px;
    width:100%;
    margin:10px 0;
  }
  .container {
    height: 100%;
  }
  .bannerArr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin-top:50px;
    background:#F7F7F7;
  }
  .banerfirst {
    padding:20px;
    width:95%;
    height:200px;
  }
  .banerfirst>img {
    width:100%;
    height:100%;
  }
  .header_text {
    text-align:left;
    margin:10px 0 0 10px;
    color:rgb(70, 69, 69);
    font-size:16px;
    font-weight:bold;
  }
  .peNumber {
    color:#c0bfbf;
    font-size:14px;
    margin:10px 0 0 10px;
    float:left;
  }
  .numadd {
    color:#229DDD;
    font-size:14px;
    height:20px;
    margin:10px 0 0 10px;
    float:right;
    margin-right:10px;
  }
  .numadd img {
    height:13px;
    width:17px;
  }
  .corsur {
    pointer-events: corsur;
  }
  .number {
    color:#B725D7;
  }
  .footer {
    height:60px;
    position:relative;
    bottom:0;
  }
  .footer>div { 
    text-align:center;
    float:left;
    width:25%;
    height:60px;
  }
  .footer div div img {
    width:22px;
    height:20px;
  }
  .footer div div {
    -webkit-display:flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
    height:30px;
    color:#888888;
    font-size:14px;
  }
</style>
